Create New Page
- Symfony
How to add a New Page:
- Create New File with the
html.twig
extenstion in thetemplates/
directory. - Create Controller for different methods related to page. (Optional. You can use default controller also.) with the routes
-
Add page link to
templates/layouts/_sidebar.html.twig
for vertical menu -
Add page link to
templates/layouts/_horizontal.html.twig
for Horizontal menu -
Add page name key in
public/assets/lang/en{all language folder}/.json
file to display in multi language.
Steps to add a new page :
-
Step 1: Create a file with the
test.html.twig
under thetemplates/
directory. Let's create a testPage for an example with filename test.html.twig and placing the below code in that file. -
Step 2: After creating above file, you need to declare its route with method where it can be served on the browser, suppose you want created page to be serve on the route http://localhost:8000/test . To access this page define its routes and it's method in the
src/Controller/HomeController.php
file.
#[Route('/test', name: 'test')]
public function test()
{
return $this->render('test.html.twig');
}
-
Step 3: After defining the route and it's method, add page link to sidebar at
Option 1: To add item in menu.templates/layouts/_horizontal.html.twig
ORtemplates/layouts/_sidebar.html.twig
file.
<a href="test" class="dropdown-item" key="t-test">Test</a>
-
Step 4: Add page name to
assets/lang/en{all language folder}/.json
file to display in multi language.
"t-test" => "Test"
{% extends 'layouts/base.html.twig' %}
{% block title %}Test Page{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block content %}
{% include 'layouts/_topbar.html.twig' with {title: 'Test' } %}
<div>
.........
</div>
{% endblock %}
{% block javascripts %}
<script src="assets/js/app.js"></script>
{% endblock %}
yarn run build
command in the project root directory. After running this process you need to run the command symfony server:start
. It will serve your app on the localhost.